<template>
    <div class="statistics-tow">
        <div class="select-custom-box">
            <selectCustom
                ref="selectCustom1"
                :option_list="option_list1"
                :select_id="searchform.groupid"
                :top_num="top_num_screen"
                :w_num_screen="w_num_screen"
                @cheOptionvalue="cheOptionvalue($event, '1')"
                @openSelect="openSelect('1')"
            ></selectCustom>
            <selectCustom
                ref="selectCustom2"
                :option_list="option_list2"
                :select_id="searchform.time"
                :top_num="top_num_screen"
                :w_num_screen="w_num_screen"
                @cheOptionvalue="cheOptionvalue($event, '2')"
                @openSelect="openSelect('2')"
            ></selectCustom>
        </div>
        <div
            class="list-box comm-list"
            v-if="data_list.length > 0"
            v-infinite-scroll="loadFun"
        >
            <div
                class="list-row"
                v-for="(item, index) in data_list"
                :key="index"
                :class="avitve_i == item.customerid ? 'acitve' : ''"
                @click="selectlistFun(item)"
            >
                <div class="img-box">
                    <img :src="item.avatar ? item.avatar : img_buf" />
                </div>
                <div class="info-box">
                    <div class="title">
                        {{ item.name }} {{ item.cellphone }}
                    </div>
                    <div class="num-box">
                        <div class="num-txt">
                            <div class="num">卖量 {{ item.sell_amount }}</div>
                            <div class="num">买量 {{ item.sell_amount }}</div>
                        </div>
                        <div class="num-txt">
                            <div class="num">卖出 {{ item.sell_amount }}</div>
                            <div class="num">买进 {{ item.sell_amount }}</div>
                        </div>
                        <div class="num-txt">
                            <div class="num">利润 {{ item.sell_amount }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <empty v-else />
        <!-- 时间选择器 -->
        <dateWin
            ref="dateWin"
            @selectDate="selectDate"
            @closeDate="closeDate"
        ></dateWin>
    </div>
</template>

<script>
import selectCustom from "@/components/comm/selectCustom.vue";
import config from "@/js/conf/Config.js";
import staticConst from "@/js/const/StaticConst.js";
import dateWin from "@/components/comm/DateWin.vue";
import empty from "@/components/comm/empty.vue";

export default {
    props: [],
    components: { selectCustom, dateWin, empty },
    computed: {},
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            avitve_i: "",
            top_num_screen: 40,
            w_num_screen: 399,
            is_soll: true,
            searchform: {
                groupid: "all",
                time: "0",
                pfrom: 0,
                pnum: 20,
                stime: "",
                dtime: "",
            },
            option_list1: [
                {
                    title: "全部团队",
                    groupid: "all",
                    id: "all",
                },
            ],
            option_list2: [],
            data_list: [],
        };
    },
    created() {
        // this.getCountls();
    },
    mounted() {},
    methods: {
        setTimeFun() {
            this.$refs.dateWin.show("show");
        },
        selectDate(st, et) {
            this.emptyFun();
            this.searchform.stime = st;
            this.searchform.dtime = et;
            this.getCountls();
        },
        closeDate() {
            if (this.searchform.stime == "") {
                this.searchform.time = "0";
            }
        },
        cheOptionvalue(item, type) {
            this.searchform.pfrom = 0;
            if (type == 1) {
                this.searchform.groupid = item.id;
            } else if (type == 2) {
                this.searchform.time = item.id;
            }
            if (type == 2 && item.id == 5) {
                this.setTimeFun();
            } else {
                this.emptyFun();
                this.getCountls();
            }
        },
        openSelect(type) {
            for (let i = 1; i < 3; i++) {
                if (i != type) {
                    this.$refs[`selectCustom${i}`].is_select_show = false;
                }
            }
        },
        selectlistFun(item) {
            this.avitve_i = item.customerid;
            this.$emit("getDetailedFun", item);
        },
        loadFun() {
            if (this.is_soll) return;
            this.searchform.pfrom += 20;
            this.getCountls();
        },
        async getCountls() {
            this.is_soll = true;
            let url = config.ASSQ_COUNT_LS;
            let param = this.searchform;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (this.option_list1.length == 1) {
                this.option_list1 = this.option_list1.concat(res.data.group_ls);
                this.option_list1.map((v) => {
                    v.id = v.groupid;
                });
            }
            if (this.option_list2.length == 0) {
                this.option_list2 = res.data.mtime;
                this.option_list2.map((v) => {
                    if (v.id == 0) {
                        v.title = "全部日期";
                    }
                });
            }

            if (res.data.count_ls) {
                this.data_list = this.data_list.concat(res.data.count_ls);
                if (param.pfrom == 0) {
                    this.avitve_i = this.data_list[0].customerid;
                    this.$emit("getDetailedFun", this.data_list[0]);
                }
                setTimeout(() => {
                    this.is_soll = false;
                }, 300);
            } else {
                if (param.pfrom == 0) {
                    this.$emit("emptyFun");
                }
                this.is_soll = true;
                this.$msg({ title: "暂无数据" });
            }
        },
        emptyFun() {
            this.data_list = [];
            this.searchform.pfrom = 0;
            this.is_soll = false;
        },
    },
};
</script>

<style lang="scss" scoped >
.statistics-tow {
    width: 400px;
    border-right: 1px solid #ededed;
    height: 100vh;
    .select-custom-box {
        padding: 7.5px 0;
        background: #f3f3f2;
        display: flex;
        justify-content: space-around;
    }
    .list-box {
        height: calc(100% - 45px);

        .list-row {
            display: flex;
            cursor: pointer;
            margin-bottom: 10px;
            padding: 10px;
            &:last-child {
                margin: 0;
            }
            &:hover {
                .img-box {
                    border-radius: 5px 0 0 5px;
                }
                .info-box {
                    background: #fdf6f6;
                    border-radius: 0 5px 5px 0;
                }
            }
            &.acitve {
                .img-box {
                    img {
                        border-radius: 5px 0 0 5px;
                    }
                }
                .info-box {
                    color: #fff;
                    background: #3e8af9;
                    border-radius: 0 5px 5px 0;
                }
            }
            .img-box {
                width: 80px;
                height: 80px;
                background: #ededed;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 5px;
                }
            }
            .info-box {
                padding-top: 3px;
                padding-left: 10px;
                width: calc(100% - 90px);
                .title {
                    margin-bottom: 10px;
                }
                .num-box {
                    display: flex;
                    .num-txt {
                        padding-right: 10px;
                        flex: 1;
                        .num {
                        }
                    }
                }
            }
        }
    }
}
</style>
